{% extends "charity/layout.html" %}

{% block charity_content %}
<div class="activities-content">
    <div class="section-header">
        <h1>Activity Management</h1>
        <a href="{{ url_for('create_activity') }}" class="btn btn-primary">
            <i class="fas fa-plus"></i> Create Activity
        </a>
    </div>

    <div class="section">
        <div class="filters">
            <select id="statusFilter" onchange="filterActivities()">
                <option value="">All Status</option>
                <option value="pending">Pending Review</option>
                <option value="approved">Approved</option>
                <option value="rejected">Rejected</option>
                <option value="completed">Completed</option>
            </select>
            <input type="text" id="searchInput" placeholder="Search activities..." onkeyup="filterActivities()">
        </div>

        <div class="activities-list">
            {% for activity in activities %}
            <div class="activity-card" data-status="{{ activity.status }}">
                <div class="activity-header">
                    <h3>{{ activity.title }}</h3>
                    <span class="status-badge {{ activity.status }}">
                        {{ activity.status|title }}
                    </span>
                </div>
                
                <div class="activity-info">
                    <p><i class="fas fa-clock"></i> {{ activity.start_time.strftime('%Y-%m-%d %H:%M') }}</p>
                    <p><i class="fas fa-map-marker-alt"></i> {{ activity.location }}</p>
                    <p><i class="fas fa-users"></i> {{ activity.registered_count }}/{{ activity.max_participants }} Participants</p>
                </div>
                
                <div class="activity-description">
                    {{ activity.description[:100] }}{% if activity.description|length > 100 %}...{% endif %}
                </div>
                
                <div class="activity-footer">
                    <a href="{{ url_for('activity_detail', activity_id=activity.id) }}" class="btn-action view">
                        <i class="fas fa-eye"></i> View Details
                    </a>
                    {% if activity.status == 'pending' %}
                    <a href="{{ url_for('edit_activity', activity_id=activity.id) }}" class="btn-action edit">
                        <i class="fas fa-edit"></i> Edit
                    </a>
                    {% endif %}
                </div>
            </div>
            {% else %}
            <div class="no-activities">
                <i class="fas fa-calendar-times"></i>
                <p>No activities found</p>
                <a href="{{ url_for('create_activity') }}" class="btn btn-primary">Create Your First Activity</a>
            </div>
            {% endfor %}
        </div>
    </div>
</div>

<style>
.filters {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.filters select,
.filters input {
    padding: 0.5rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    min-width: 150px;
}

.activities-list {
    display: grid;
    gap: 1.5rem;
}

.activity-card {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    padding: 1.5rem;
}

.activity-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.activity-header h3 {
    margin: 0;
    color: #2c3e50;
}

.status-badge {
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.875rem;
}

.status-badge.pending {
    background: #fff3e0;
    color: #e65100;
}

.status-badge.approved {
    background: #e8f5e9;
    color: #2e7d32;
}

.status-badge.rejected {
    background: #ffebee;
    color: #c62828;
}

.status-badge.completed {
    background: #e8eaf6;
    color: #283593;
}

.activity-info {
    margin-bottom: 1rem;
}

.activity-info p {
    margin: 0.5rem 0;
    color: #666;
}

.activity-info i {
    width: 20px;
    color: #3498db;
}

.activity-description {
    margin-bottom: 1.5rem;
    color: #666;
    line-height: 1.4;
}

.activity-footer {
    display: flex;
    gap: 1rem;
}

.btn-action {
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    flex: 1;
    justify-content: center;
}

.btn-action.view {
    background: #f8f9fa;
    color: #2c3e50;
    border: 1px solid #ddd;
}

.btn-action.edit {
    background: #e3f2fd;
    color: #1976d2;
}

.btn-action:hover {
    opacity: 0.9;
}

.no-activities {
    text-align: center;
    padding: 3rem;
    color: #666;
}

.no-activities i {
    font-size: 3rem;
    margin-bottom: 1rem;
    color: #ddd;
}

.no-activities p {
    margin-bottom: 1.5rem;
}

@media (max-width: 768px) {
    .filters {
        flex-direction: column;
    }
    
    .filters select,
    .filters input {
        width: 100%;
    }
}
</style>

<script>
function filterActivities() {
    const status = document.getElementById('statusFilter').value;
    const search = document.getElementById('searchInput').value.toLowerCase();
    
    const cards = document.querySelectorAll('.activity-card');
    
    cards.forEach(card => {
        const cardStatus = card.getAttribute('data-status');
        const text = card.textContent.toLowerCase();
        
        const matchesStatus = !status || cardStatus === status;
        const matchesSearch = !search || text.includes(search);
        
        if (matchesStatus && matchesSearch) {
            card.style.display = '';
        } else {
            card.style.display = 'none';
        }
    });
}
</script>
{% endblock %} 